<template>
  <el-dialog
          :model-value="visible"
          title="详情"
          @close="dialogClose"
          width="50%"
  >

     <el-form :model="row" ref="formRef" :rules="formRules" label-width="100px">
        <el-form-item label="任务名称：" prop="name">
          <el-input v-model="row.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="脚本名称：" prop="command">
          <el-input v-model="row.command" disabled></el-input>
        </el-form-item>
        <el-form-item label="执行频率：" prop="schedule">
          <el-input v-model="row.schedule" placeholder="示例：*/5 * * * *" disabled></el-input>
        </el-form-item>
        <el-form-item label="目标主机：" prop="server_ids">
            <el-select class="m-2" v-model="row.server_ids" @click="getServer" multiple placeholder="请选择" style="width: 100%" disabled>
              <el-option v-for="row in server" :key="row.id" :label="row.name" :value="row.id">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="脚本内容：" prop="cron_script" >
          <div ref="cron_script" class="ace-editor"></div>
        </el-form-item>
        <el-form-item label="备注：" prop="note">
          <el-input v-model="row.note" type="textarea" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间：" prop="note">
          <el-input v-model="row.create_time" disabled></el-input>
        </el-form-item>
        <el-form-item label="更新时间：" prop="note">
          <el-input v-model="row.update_time"  disabled></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
        </span>
      </template>

  </el-dialog>
</template>

<script>
    import ace from 'ace-builds/src-noconflict/ace';
    export default {
        props: {
            visible: Boolean,
            row: '',  // 当前行内容
        },
        data() {
            return {
                server: ''
            }
        },
        methods: {
          dialogClose() {
            this.$emit('update:visible', false)  // 当对话框关闭，通过父组件更新为false
          },
          //初始化ace编辑器
           initEditor() {
              const editor = ace.edit(this.$refs.cron_script);
              editor.setTheme('ace/theme/monokai'); // 设置主题
              editor.getSession().setMode('ace/mode/javascript'); // 设置语言模式
              editor.setValue(this.row.cron_script); // 设置编辑器内容
              editor.setFontSize(15); //字体大小
              editor.setReadOnly(true); //设置只读
              editor.gotoLine(1); //去掉蓝色背景
          },
          // 获取主机
          getServer() {
              this.$http.get('/cmdb/server/')
                .then(res => {
                    this.server = res.data.data;
                })
           },
        },
        // 监听打开编辑窗口
        watch: {
            visible() {
                this.getServer();
            }
       },
        updated() {
           this.initEditor();
        },
    }
</script>

<style scoped>
    .ace-editor {
      width: 100%;
      height: 150px; /* 设置编辑器高度 */
      border: 1px solid #ccc;
      /*background-color: #f0f0f0;*/
    }
</style>